<template>
    <div class="main-register-step1">
        <van-image width="100%" :src="phone1" class="img" />
        <div class="form">
            <van-form @submit="onSubmit" :show-error-message="false" @failed="onFailed" >
                <van-field
                    class="username"
                    v-model="form.username"
                    name="username"
                    placeholder="Name Surname"
                    :rules="[{ required: true, message: 'Name Surname is required' }]"
                />
                <InputCountryPhone v-model:form="phoneForm" :rules="[{ required: true, message: 'Phone Number is required' }]" name="phoneNum" placeholder="Phone Number" />
                <p class="tip">We need to verify you. We will send you a one time verification code.</p>
                <div style="margin: 20px 0px">
                    <van-button round block type="primary" native-type="submit"><strong>Next</strong></van-button>
                </div>
                <p class="tip w8"><center>Already have an account? <font color="#FF5E00">Login</font></center></p>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { inject, onMounted, ref, watch, reactive } from 'vue'
import phone1 from '../../assets/phone-1.png'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import InputCountryPhone from '../../components/custom/input-country-phone/index.vue'

const store = useStore()
const router = useRouter()

const {form} = defineProps({ 
    form: {
        type: Object as () => {countryid: number, username: string, phoneNum: string}, //(string也可以是其他你自定义的接口)
        required: true, 
        default: {}
    } 
});

const phoneForm:  {countryid: number, phoneNum: string} = reactive({countryid: 0, phoneNum: ''})

const onNext: any = inject('onNext')

const onFailed: void = inject('onFailed')

const onSubmit = () => {
    form.countryid = phoneForm.countryid;
    form.phoneNum = phoneForm.phoneNum;
    onNext();
}

watch([phoneForm], ()=>{
    console.log('awd')
})

</script>

<style lang="less" scoped>


.main-register-step1 {
    .img {
        transform: rotate(17.23deg)
    }
    .form {
        margin-top: 40px;
        .username {
            margin-bottom: 10px;
        }

        .tip {
            font-size: 16px;
            line-height: 19px;
            color: #7F4E1D;
            &.w8 {
                padding-bottom: 40px;
            }
        }
    }
}



</style>
